import React from 'react'
export default function Count(){
  /*
    函数式组件再 react16.8版本之前只能作为简单的组件来进行使用 只能式用下props 是没有 state 和 ref的
      但是react再16.8之后 就引入了 hooks 的概念 即是钩子
        让函数式组件也可以拥有了自己的状态
  */ 
  const [count,setCount] = React.useState(0)  // 注意 这里react其实是做了缓存处理的 即使页面又执行了这条语句 传递了新的值 但是还是用的缓存的值 所以不会出现无限的 赋初始值的情况
  /*
    useState 函数传递一个初始状态 返回一个数组  数组的第一项就是state的值 第二项是修改state状态的方法
  */ 
  console.log('count一变就重新渲染')
  function addOne(){
    // setCount(count+1) 方法1 直接传递一个要改变的值
    setCount(preCount=>preCount+1) // 方法2 传递一个函数 返回值是要修改的值
  }

  return (
    <div>
      <h2>当前的值为：{count}</h2>
      <button onClick={addOne}>点我+1</button>
    </div>
  )
}